<template>
  <div class="one-function-area">
    <div class="one-function-title-area">
      <div class="function-area-title-piece"></div>
      <div class="function-area-title">基础样式配置</div>
    </div>
    <el-divider></el-divider>
    <div class="one-function-content-area">
      <div class="head-title">
        <div>头图配置</div>
        <div>推荐尺寸为750*500px，图片过长/视频过大会影响活动加载</div>
      </div>
      <div class="head-img-upload">
        <div>上传图片或视频（2/{{ base_style_config.head_image.image_max_size }}）</div>
        <div>
          <SmallImageUpload :is-show-tip='false' v-model="base_style_config.head_image.images" :limit="5"/>
        </div>
        <p>
          最多上传5个素材，其中最多上传1个视频（mp4格式），视频大小不超过200M。视频将默认展示在图片之前，单张图片需限制在10M以内。
        </p>
      </div>
      <div class="activity-title">
        <div class="title">活动标题</div>
        <div>
          <el-input type="textarea" :rows="1" size="small" v-model="base_style_config.title.title"
                    placeholder="输入活动标题，最多35个字" maxlength="35" show-word-limit></el-input>
        </div>
      </div>
      <div class="activity-time">
        <div class="activity-time-title">活动时间</div>
        <div class="activity-time-select">
          <div class="activity-time-select-left">
            <el-date-picker
              v-model="base_style_config.start_end_time.start_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <div class="activity-time-select-center">至</div>
          <div class="activity-time-select-right">
            <el-date-picker
              v-model="base_style_config.start_end_time.end_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div>
        <div class="base-config-custom">
          <div class="base-config-custom-title">高级自定义</div>
          <div class="base-config-custom-desc">语音标题、弹幕、头像、背景颜色等</div>
          <div class="base-config-custom-button">
            <el-button v-if="!base_style_config_custom" type="text" @click="base_style_config_custom = true">展开
              <i class="el-icon-arrow-down"></i></el-button>
            <el-button v-if="base_style_config_custom" type="text" @click="base_style_config_custom = false">收起
              <i class="el-icon-arrow-up"></i></el-button>
          </div>
        </div>
        <div v-if="base_style_config_custom" class="custom-area">
          <div class="custom-area-style">
            <div>
              <span class="subtitle">顶部弹幕</span>
              <span class="subtitle-desc">显示浏览、下单等动作弹幕</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_top_barrage" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
          <div class="custom-area-style">
            <div>
              <span class="subtitle">围观头像区</span>
              <span class="subtitle-desc">显示数据及头像组件</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_avatar_url" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
          <div class="custom-area-style">
            <div>
              <span class="subtitle">邀请排行榜</span>
              <span class="subtitle-desc">显示邀请排行榜</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_invite_rank" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
          <div class="custom-area-style">
            <div>
              <span class="subtitle">页面底部购买记录</span>
              <span class="subtitle-desc">显示用户下单购买记录</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_bottom_buy_record" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
          <div class="last-custom">
            <span>背景颜色</span>
            <span style="vertical-align: middle"><el-color-picker v-model="base_style_config.custom.bg_colour"></el-color-picker></span>
            <span style="vertical-align: middle"><el-button type="text" @click="resetBgColor">重置</el-button></span>
          </div>
          <div class="custom-area-style">
            <div>
              <span class="subtitle">活动倒计时</span>
              <span class="subtitle-desc">显示活动距离结束剩余时间</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_countdown" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
          <div class="last-custom">
            <span>下单按钮文字</span>
            <el-input style="vertical-align: middle; width: 50%; padding-left: 20px;" size="mini" v-model="base_style_config.custom.create_order_before"/>
            <span style="vertical-align: middle"><el-button type="text" @click="resetCreateOrderBefore">重置</el-button></span>
          </div>
          <div class="last-custom">
            <span>成功下单后按钮文字</span>
            <el-input style="vertical-align: middle; width: 50%; padding-left: 20px;" size="mini" v-model="base_style_config.custom.create_order_after"/>
            <span style="vertical-align: middle"><el-button type="text" @click="resetCreateOrderAfter">重置</el-button></span>
          </div>
          <div class="custom-area-style">
            <div>
              <span class="subtitle">活动首页侧边栏</span>
              <span class="subtitle-desc">显示活动页侧边栏的按钮</span>
            </div>
            <div class="subtitle-switch">
              <el-switch v-model="base_style_config.custom.is_show_home_side_function" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseConfig",
  props: ['base_style_config'],
  data() {
    return{
      activityDateRange:[],
      base_style_config_custom: false,
    }
  },
  methods: {
    /** 重置颜色 */
    resetBgColor() {
      this.$emit("reset-bg-color")
    },
    /** 重置下单按钮文字 */
    resetCreateOrderBefore() {
      this.$emit("reset-create-order-before")
    },
    /** 重置成功下单后按钮文字 */
    resetCreateOrderAfter() {
      this.$emit("reset-create-order-after")
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px;
}
::v-deep .el-textarea__inner{
  font-size: 12px;
}

::v-deep .el-color-picker__color-inner{
  width: 100px;
}

::v-deep .el-picker-panel__footer {
  text-align: center;
}

.one-function-area {
  .one-function-title-area {
    display: flex;
    position: relative;

    .function-area-title-piece {
      width: 5px;
      height: 30px;
      background-color: #2254f5;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .function-area-title {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #2254f5;
      padding-left: 10px;
      align-content: center;
    }
  }

  .one-function-content-area {
    .head-title {
      display: flex;

      div:first-child {
        padding-left: 10px;
        font-size: 14px;
        font-weight: bold;
      }

      div:last-child {
        padding-left: 10px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
        align-content: center;
      }
    }

    .head-img-upload {
      div:first-child {
        font-size: 14px;
        padding: 10px 0 10px 10px;
      }

      div:last-child {

      }

      p {
        margin: 0;
        padding-left: 10px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
      }
    }

    .activity-title {
      padding-left: 10px;
      font-size: 14px;

      .title {
        padding: 10px 0 10px 0;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .activity-time {
      padding-left: 10px;
      .activity-time-title {
        padding: 10px 0 10px 0;
        font-size: 14px;
        font-weight: bold;
      }
      .activity-time-select {
        display: flex;
        .activity-time-select-left {
          width: 220px;
          text-align: left;
        }
        .activity-time-select-center {
          width: 60px;
          text-align: center;
          align-content: center;
        }

        .activity-time-select-right {
          width: 220px;
          text-align: right;
        }
      }
    }

    .base-config-custom {
      padding: 20px 0 10px 10px;
      display: flex;

      .base-config-custom-title {
        min-width: 80px;
        font-size: 14px;
        font-weight: bold;
        color: #ff4d20;
        align-content: center;
      }

      .base-config-custom-desc {
        width: 300px;
        font-size: 12px;
        padding-left: 5px;
        align-content: center;
        color: rgba(0, 0, 0, 0.5);
      }

      .base-config-custom-button {
        width: 100px;
        align-content: center;
        text-align: right;
      }
    }

    .custom-area {
      width: 100%;
      height: 490px;
      border-radius: 10px;
      background-color: #f6f7f9;
      padding: 20px;

      > div {
        width: 100%;
        height: 50px;
      }

      .custom-area-style {
        display: grid;
        grid-template-columns: 80% 20%;
        align-content: center;

        .subtitle {
          font-size: 14px;
          align-content: center;
        }

        .subtitle-desc {
          padding-left: 10px;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
          align-content: center;
        }

        .subtitle-switch {
          text-align: right;
          align-content: center;
        }
      }

      .last-custom {
        padding-top: 10px;
        span:nth-of-type(1) {
          font-size: 14px;
        }
        span:nth-of-type(2) {
          vertical-align: middle;
          padding-left: 20px;
          width: 50px;
        }
        span:nth-of-type(3) {
          vertical-align: middle;
          padding-left: 90px;
        }
      }
    }
  }
}
</style>
